<template>
    <div class="task-detail-container">
        <!-- 顶部操作栏 -->
        <div class="action-bar">
            <el-button @click="goBack" :icon="ArrowLeft">返回</el-button>
            <el-button type="primary" @click="handleEdit" :icon="Edit">编辑</el-button>
            <el-button type="danger" @click="handleDelete" :icon="Delete">删除</el-button>
        </div>

        <!-- 任务基本信息 -->
        <el-card class="task-info-card">
            <template #header>
                <span class="task-title">{{ taskInfo.title }}</span>
                <el-tag :type="getStatusType(taskInfo.status)" class="status-tag">
                    {{ taskInfo.status }}
                </el-tag>
            </template>
            <el-descriptions :column="2" border>
                <el-descriptions-item label="需求编号">{{ taskInfo.taskId }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ taskInfo.createTime }}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{ taskInfo.creator }}</el-descriptions-item>
                <el-descriptions-item label="处理人">{{ taskInfo.assignee }}</el-descriptions-item>
                <el-descriptions-item label="优先级">
                    <el-tag v-if="taskInfo.priority" :type="getPriorityType(taskInfo.priority)">
                        {{ taskInfo.priority }}
                    </el-tag>
                    <span v-else>-</span>
                </el-descriptions-item>
                <el-descriptions-item label="分类">{{ taskInfo.category }}</el-descriptions-item>
                <el-descriptions-item label="开始时间">{{ taskInfo.startDate || '未设置' }}</el-descriptions-item>
                <el-descriptions-item label="截止时间">{{ taskInfo.endDate || '未设置' }}</el-descriptions-item>
            </el-descriptions>
        </el-card>

        <!-- 需求描述 -->
        <el-card class="task-description-card">
            <template #header>
                <span>需求描述</span>
            </template>
            <div class="description-content" v-html="taskInfo.description || '暂无描述'"></div>
        </el-card>

        <!-- 评论区域 -->
        <el-card class="comment-card">
            <template #header>
                <span>评论</span>
            </template>
            <div class="comment-list">
                <div v-if="taskInfo.comments && taskInfo.comments.length > 0">
                    <div v-for="comment in taskInfo.comments" :key="comment.id" class="comment-item">
                        <el-avatar :src="comment.avatar" size="small"></el-avatar>
                        <div class="comment-content">
                            <div class="comment-header">
                                <span class="comment-author">{{ comment.author }}</span>
                                <span class="comment-time">{{ comment.time }}</span>
                            </div>
                            <div class="comment-text">{{ comment.content }}</div>
                        </div>
                    </div>
                </div>
                <el-empty v-else description="暂无评论" />
            </div>
            <div class="comment-input">
                <el-input type="textarea" v-model="newComment" :rows="3" placeholder="请输入评论内容" />
                <el-button type="primary" @click="submitComment" style="margin-top: 10px">
                    发表评论
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Edit, Delete } from '@element-plus/icons-vue'
import { getNeedDetail, getBugDetail } from '@/api/project.js'

const router = useRouter()
const route = useRoute()

const props = defineProps({
    row: {
        type: Object,
        required: true
    }
})

watch(() => props.row, (newVal) => {
    if (newVal.user_need) {
        getNeedDetail(newVal.id).then(res => {
            taskInfo.value = {
                taskId: res.data.data.id,
                title: res.data.data.title,
                status: res.data.data.status,
                createTime: res.data.data.createdAt,
                creator: res.data.data.creator,
                assignee: res.data.data.handlerArray?.[0]?.realName || '未分配',
                priority: res.data.data.priority,
                category: res.data.data.category,
                startDate: res.data.data.startDate,
                endDate: res.data.data.endDate,
                description: res.data.data.details || '',
                attachments: [], // Default empty array since it's not in the response
                comments: res.data.data.comments || []
            }
        })
    } else if (newVal.user_bug) {
        getBugDetail(newVal.id).then(res => {
            taskInfo.value = {
                taskId: res.data.data.id,
                title: res.data.data.title,
                status: res.data.data.status,
                createTime: res.data.data.createdAt,
                creator: res.data.data.creator,
                assignee: res.data.data.handlerArray?.[0]?.realName || '未分配',
                priority: res.data.data.priority,
                category: res.data.data.category,
                startDate: res.data.data.startDate,
                endDate: res.data.data.endDate,
                description: res.data.data.details || '',
                attachments: [], // Default empty array since it's not in the response
                comments: res.data.data.comments || []
            }
        })
    }
}, { immediate: true })

const taskInfo = ref({
    taskId: '',
    title: '',
    status: '',
    createTime: '',
    creator: '',
    assignee: '',
    priority: '',
    category: '',
    startDate: '',
    endDate: '',
    description: '',
    attachments: [],
    comments: []
})

const newComment = ref('')


// 返回上一页
const goBack = () => {
    router.go(-1)
}

// 编辑任务
const handleEdit = () => {
    router.push(`/task/edit/${taskInfo.value.taskId}`)
}

// 删除任务
const handleDelete = async () => {
    try {
        await ElMessageBox.confirm('确认删除该任务吗？', '提示', {
            type: 'warning'
        })
        // TODO: 调用删除API
        // await api.deleteTask(taskInfo.value.taskId)
        ElMessage.success('删除成功')
        goBack()
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('删除失败')
        }
    }
}

// 获取状态对应的类型
const getStatusType = (status) => {
    const statusMap = {
        '规划中': 'info',
        '进行中': 'primary',
        '已完成': 'success',
        '已取消': 'danger'
    }
    return statusMap[status] || 'info'
}

// 获取优先级对应的类型
const getPriorityType = (priority) => {
    const priorityMap = {
        'Low': 'info',
        'Medium': 'warning',
        'High': 'danger'
    }
    return priorityMap[priority] || 'info'
}

// 上传附件
const handleUpload = () => {
    // TODO: 实现文件上传功能
}

// 下载附件
const handleDownload = (file) => {
    // TODO: 实现文件下载功能
    console.log('Download file:', file)
}

// 删除附件
const handleDeleteAttachment = async (file) => {
    try {
        await ElMessageBox.confirm('确认删除该附件吗？', '提示', {
            type: 'warning'
        })
        // TODO: 调用删除附件API
        // await api.deleteAttachment(file.id)
        ElMessage.success('删除成功')
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('删除失败')
        }
    }
}

</script>

<style lang="scss" scoped>
.task-detail-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;

    .action-bar {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
    }

    .task-info-card {
        margin-bottom: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        :deep(.el-card__header) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
        }

        .task-title {
            font-size: 20px;
            font-weight: 600;
            color: #303133;
            margin-right: 15px;
        }

        .status-tag {
            font-size: 14px;
            padding: 4px 12px;
        }
    }

    .task-description-card {
        margin-bottom: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        :deep(.el-card__header) {
            padding: 15px 20px;
            font-weight: 600;
            color: #303133;
            border-bottom: 1px solid #ebeef5;
        }

        .description-content {
            padding: 15px 20px;
            line-height: 1.8;
            color: #606266;
            min-height: 100px;
        }
    }

    .attachment-card {
        margin-bottom: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        :deep(.el-card__header) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
        }
    }

    .comment-card {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        :deep(.el-card__header) {
            padding: 15px 20px;
            font-weight: 600;
            color: #303133;
            border-bottom: 1px solid #ebeef5;
        }

        .comment-list {
            padding: 15px 20px;
            margin-bottom: 20px;

            .comment-item {
                display: flex;
                margin-bottom: 20px;
                padding-bottom: 20px;
                border-bottom: 1px solid #ebeef5;

                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 0;
                    border-bottom: none;
                }

                .comment-content {
                    margin-left: 12px;
                    flex: 1;

                    .comment-header {
                        margin-bottom: 8px;
                        display: flex;
                        align-items: center;

                        .comment-author {
                            font-weight: 600;
                            color: #303133;
                            margin-right: 12px;
                        }

                        .comment-time {
                            color: #909399;
                            font-size: 13px;
                        }
                    }

                    .comment-text {
                        line-height: 1.6;
                        color: #606266;
                        word-break: break-all;
                    }
                }
            }
        }

        .comment-input {
            padding: 15px 20px;
            border-top: 1px solid #ebeef5;

            :deep(.el-textarea__inner) {
                min-height: 100px;
                resize: vertical;
            }

            .el-button {
                margin-top: 12px;
            }
        }
    }

    :deep(.el-descriptions) {
        padding: 15px 20px;

        .el-descriptions__label {
            width: 120px;
            color: #606266;
            font-weight: 500;
        }

        .el-descriptions__content {
            color: #303133;
        }
    }
}
</style>
